<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    void main(){
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      gl_PointSize = 100.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    precision lowp float;
    void main(){
      // 计算距离
      float dis = distance(gl_PointCoord,vec2(0.5,0.5));
      if(dis > 0.5 || (dis < 0.4 && dis > 0.3)||dis<0.2){
        discard;
      }else{
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
    }
  `;
    // 封装后
    const program = initShader(gl,VERTEX_SHADER_SORUCE,FRAGEMNT_SHADER_SOURCE)
    gl.drawArrays(gl.POINTS, 0, 1);


</script>

